<!DOCTYPE html>
<html lang="zh" xmlns="http://www.w3.org/1999/html">
<head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
    <meta name="viewport" content="width=device-width, initial-scale=1.0,minimum-scale=1.0, maximum-scale=1.0, user-scalable=no,viewport-fit=cover">
    <meta name="format-detection" content="telephone=no">
    <meta http-equiv="x-rim-auto-match" content="none">
    <link rel="stylesheet" href="/addons/jquery-weui-build/css/weui.min.css">
    <link rel="stylesheet" href="/addons/jquery-weui-build/css/jquery-weui.css">
    <link rel="stylesheet" href="/css/system/iconfont.css">
    <link rel="stylesheet" href="/css/system/front-iconfont.css">
    <link rel="stylesheet" href="/css/system/common.css">
    @if($skinid == 2)
        <link rel="stylesheet" href="/css/login/password.css?v={{time()}}">
    @elseif($skinid == 1)
        <link rel="stylesheet" href="/css/theme-blue/login/password.css?v={{time()}}">
    @endif
    <script src="/js/jquery-2.1.4.min.js"></script>
    <title>找回密码</title>
</head>
<body ontouchstart>
<div class="login-bk">
    <div class="login-title">
        @if($skinid == 2)
            <img src="/img/kpi.png">
        @elseif($skinid == 1)
            <img src="/img-theme-blue/kpi.png">
        @endif
        <p>绩效考核系统</p>
    </div>
    <div class="side-con">
        <form class="weui-cells login-form next-form" onsubmit="return false;">
            <div class="weui-cell">
                <div class="weui-cell__hd"><i class="icon iconfont icon-yonghu"></i></div>
                <div class="weui-cell__bd">
                    <input type="text" name="username" id="username" class="input-text" placeholder="请输入手机号/邮箱" />
                </div>
            </div>
            <div class="weui-cell verify-sec">
                <div class="weui-cell__hd">
                    <input type="text" name="verify" id="verify" class="input-text" placeholder="请输入手机/邮箱验证码" />
                </div>
                <div class="weui-cell__bd">
                    <input type="button" value="获取" class="verify_code" />
                </div>
            </div>
            <button type="button" class="weui-btn weui-btn_color next-btn"/>下一步</button>
        </form>
        <form class="weui-cells login-form pass-form" onsubmit="return false;">
            <div class="weui-cell">
                <div class="weui-cell__hd"></div>
                <div class="weui-cell__bd">
                    <input type="password" name="password" id="password" class="input-text" placeholder="请输入新密码" />
                </div>
            </div>
            <div class="weui-cell">
                <div class="weui-cell__hd"></div>
                <div class="weui-cell__bd">
                    <input type="password" name="newpassword" id="newpassword" class="input-text" placeholder="请再次输入新密码" />
                </div>
            </div>
            {!! csrf_field() !!}
            <button type="button" class="weui-btn weui-btn_color sure-btn"/>确认</button>
        </form>
        <div><span>已有账号？</span><a href="/front/login">立即登录</a></div>
    </div>

</div>
<script src="/addons/jquery-weui-build/js/fastclick.js"></script>
<script src="/addons/jquery-weui-build/js/jquery-weui.min.js"></script>
<script>
    $(function() {
        document.documentElement.style.fontSize = document.documentElement.clientWidth / 7.5 + 'px';
        FastClick.attach(document.body);
    });
</script>
<script>
    $(document).ready(function () {
        //倒计时
        function setTimer(){
            var time=60;
            var timers=setInterval(function(){
                time--;
                if(time <= 0){
                    time=0;
                    $('.verify_code').attr('disabled',false);
                    $('.verify_code').eq(0)[0].b=false;
                    $('.verify_code').val('获取');
                    clearInterval(timers);
                    $('.verify_code').css('font-size','16px')
                    return false;
                }
                $('.verify_code').attr('disabled','disabled');
                $('.verify_code').css('font-size','14px')
                $('.verify_code').val(time + "秒后重试")
            },1000)
        }

        //正则表达式，十一位数字的电话号码
        var phoneReg = /^(0|86|17951)?(13[0-9]|15[012356789]|17[0-9]|18[0-9]|14[57])[0-9]{8}$/;
        //邮箱验证
        var myreg=/^(\w-*\.*)+@(\w-?)+(\.\w{2,})+$/;
        //点击发送验证码按钮，进行倒计时
        var token = $('input[name=_token]').val();
        $('.verify_code').on('click',function(){
            var username = $("#username").val().trim();
            if(username == ''){
                $.toast("请输入手机号或邮箱!",'text');
                return false;
            }


            if(!phoneReg.test(username) && !myreg.test(username)){
                $.toast("请输入正确的手机号/邮箱!",'text');
                return false;
            }
            if(!this.b){
                setTimer();
                this.b=true;
            }
            $.ajax({
                'url': '/sendmsg?_token='+token,
                'type': 'POST',
                'data': {'phone':username,'type':'1'},//1为忘记密码
                error: function (request) {
                    $.toast('网络错误',"text");
                },
                success: function (data) {
                    if (data.status == 'success') {
                        $.toast(data.msg);
                    } else {
                        $.toast(data.msg,"text");
                    }
                },
            });
        })


        //下一步
        $('.next-btn').click(function () {
            var username = $("#username").val().trim();
            var verify = $("#verify").val().trim();
            if(username == ''){
                $.toast("请输入用户名!",'text');
                return false;
            }
            if(!phoneReg.test(username) && !myreg.test(username)){
                $.toast("请输入正确的手机号/邮箱!",'text');
                return false;
            }
            if(verify == ''){
                $.toast("验证码不能为空!",'text');
                return false;
            }
            $.ajax({
                url:'/front/password-code?_token='+token,
                type:'post',
                dataType:'json',
                data:{'phone_code':verify,'username':username},
                error: function (request) {
                    $.toast('网络错误',"text");
                },
                success: function (data) {
                    if (data.status == 'success') {
                        $.toast(data.msg);
                        $('.next-form').css('display','none');
                        $('.pass-form').css('display','block');
                    } else {
                        $.toast(data.msg,"text");
                    }
                },
            });
        })
        //确认提交，修改密码
        $('.sure-btn').click(function () {
            var username = $("#username").val().trim();
            var verify = $("#verify").val().trim();
            var password = $("#password").val().trim();
            var newpassword = $("#newpassword").val().trim();
            var pattern = /^[\w_-]{6,16}$/;
            if(password == '' && newpassword == ''){
                $.toast("请输入密码!",'text');
                return false;
            }
            if(!pattern.test(password)){
                $.toast("最少6位，但不超过16位!",'text');
                return false;
            }
            if(newpassword !== password){
                $.toast("两次密码不一致!",'text');
                return false;
            }
            $.ajax({
                url:'/front/reset-password?_token='+token,
                type:'post',
                dataType:'json',
                data:{'phone_code':verify,'username':username,'password':password,'repassword':newpassword},
                error: function (request) {
                    $.toast('网络错误',"text");
                },
                success: function (data) {
                    if (data.status == 'success') {
                        $.toast(data.msg+'请重新登录');
                        setTimeout(function(){ window.location.href=data.redirectUrl; }, 1000);
                    } else {
                        $.toast(data.msg,"text");
                    }
                },
            });
        })
    })
</script>
</body>
</html>
